/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type { PropsWithChildren } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import ClassView from './src/components/ClassView';
import FunctionView from './src/components/FunctionView';
import InfoCarView from './src/components/InfoCarView';
import TimerView from './src/components/TimerMyView'
import PressableDemo from './src/components/PressableDemo';
import ScrollViewDemo from './src/components/ScrollViewDemo';
import PersonCenter from './src/personCenter/personCenter';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({ children, title }: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): JSX.Element {
  
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };


  //定义传值一个lineView
  const getLineView  = ()=> {
    return (
      <View style={{width:'100%',height:2,backgroundColor:'red'}}></View>
    );
  }


  return (
    <View  style={styles.container}>
      {/* <ClassView name = "wang" age = {12} level = {true}/> */}
      {/* <FunctionView name = "wang" age = {12} level = {true}/> */}
      {/* <InfoCarView name= "wangbf" sex = "男" age = {31} level = {true} lineView = {getLineView()}/> */}
      {/* <TimerView></TimerView> */}
      {/* <PressableDemo></PressableDemo> */}
      {/* <ScrollViewDemo></ScrollViewDemo> */}
      <PersonCenter></PersonCenter>
    </View>

  );
}

const styles = StyleSheet.create({
  container:{
    width:'100%',
    height:'100%',
    flexDirection:'column',
    alignItems:'center',
    marginTop:0
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
    alignItems:'center',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
